<template>
    <a-layout class="main">
        <div class="form">
            <a-button class="formButton" type="primary" @click="getProcessList">查询</a-button>
            <a-button class="formButton" type="primary" style="margin-left: 10px;"
                @click="$router.push('/Process')">新增</a-button>
        </div>
        <a-table :loading="loading" rowKey="deploymentId" :columns="columns" :dataSource="dataSource">
            <a-dropdown slot="operate" class="go" slot-scope="text,scope">
                <span>更多操作
                    <a-icon type="down" />
                </span>
                <a-menu slot="overlay">
                    <a-menu-item @click="goPath(scope)">
                        发起流程
                    </a-menu-item>
                    <a-menu-item @click="formConfiguration(scope)" v-if="scope.formId == null">
                        配置表单
                    </a-menu-item>
                    <a-menu-item @click="handleLoadXml(scope)">
                        编辑
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </a-table>
        <a-modal title="配置表单" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk"
            @cancel="handleCancel">
            <a-table rowKey="formId"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
                :dataSource="dataSourceForm" :columns="columnsForm">
            </a-table>
        </a-modal>
    </a-layout>
</template>

<script>
import { listDefinition } from "../../components/process/api/definition"
import { listForm, addDeployForm } from "../../components/process/api/form"
export default {
    data() {
        return {
            dataSource: [],
            columns: [
                {
                    title: "流程编号",
                    dataIndex: "deploymentId",
                    key: "deploymentId"
                }, {
                    title: "流程标识",
                    dataIndex: "flowKey",
                    key: "flowKey"
                }, {
                    title: "流程名称",
                    dataIndex: "name",
                    key: "name"
                }, {
                    title: "流程分类",
                    dataIndex: "category",
                    key: "category"
                }, {
                    title: "流程版本",
                    dataIndex: "version",
                    key: "version",
                }, {
                    title: "流程状态",
                    dataIndex: "suspensionState",
                    key: "suspensionState",
                    customRender: (text) => {
                        if (text === 1) {
                            return "激活"
                        } else {
                            return "挂起"
                        }
                    }
                }, {
                    title: "操作",
                    key: "operate",
                    scopedSlots: { customRender: 'operate' },
                }
            ],
            dataSourceForm: [],
            columnsForm: [
                {
                    title: "表单编号",
                    dataIndex: "formId",
                    key: "formId"
                },
                {
                    title: "表单名称",
                    dataIndex: "formName",
                    key: "formName"
                },

                {
                    title: "备注",
                    dataIndex: "remark",
                    key: "remark"
                },
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: null,
                category: null,
                key: null,
                tenantId: null,
                deployTime: null,
                derivedFrom: null,
                derivedFromRoot: null,
                parentDeploymentId: null,
                engineVersion: null
            },
            loading: false,
            visible: false,
            confirmLoading: false,
            scope: {},
            selectedRowKeys: [],
            formDeployParam: {
                formId: null,
                deployId: null
            }
        }
    },
    created() {
        this.getProcessList()
        this.getFormList()
    },
    methods: {
        getProcessList() {
            this.loading = true
            listDefinition(this.queryParams).then(response => {
                if (response.code == 200) {
                    this.dataSource = response.data.records;
                } else {
                    this.$message.error(response.msg)
                }
            }).finally(() => {
                this.loading = false
            });

        },
        getFormList() {
            listForm({
                pageNum: 1,
                pageSize: 10,
                formName: null,
                formContent: null,
            }).then(res => {
                this.dataSourceForm = res.rows;
            });
        },
        goPath(record) {
            this.$router.push({
                path: "/goProcess", query: {
                    deployId: record.deploymentId,
                    procDefId: record.id,
                    finished: true
                }
            })
        },
        onClick(val) {

        },
        handleLoadXml(row) {
            this.$router.push({ path: '/editProcess', query: { deployId: row.deploymentId } })
        },
        formConfiguration(scope) {
            this.scope = scope
            this.formDeployParam.deployId = scope.deploymentId
            this.showModal()
        },
        showModal() {
            this.visible = true;
        },
        handleOk(e) {
            this.confirmLoading = true;
            addDeployForm(this.formDeployParam).then(res => {
                this.$message.success(res.msg);
                this.visible = false;
                this.confirmLoading = false;
                this.getProcessList()
            })
        },
        handleCancel(e) {
            this.visible = false;
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
            this.formDeployParam.formId = selectedRowKeys[0]
        },
    }
}
</script>

<style scoped lang="less">
.main {
    width: 1200px;
    margin: auto;
    margin-top: 20px;
    background-color: white;

    .form {
        display: flex;
        justify-content: center;

        .formButton {
            margin: 20px 0;
        }
    }

    .go {
        cursor: pointer;

        &:hover {
            color: #40a9ff;
        }
    }

}
</style>